
    // 上传头像
    const upload = document.querySelector('#upload')
    const avatar = document.querySelector('.figure img')

    // 昵称
    const nickname = document.querySelector('[name=nickname]')

    // 省市区
    const province = document.querySelector('[name=province]')
    const city = document.querySelector('[name=city]')
    const area = document.querySelector('[name=area]')


    // 接口文档：https://www.showdoc.com.cn/1834761734600444/8477923164668939
    const qs = ele => document.querySelector(ele)
    axios.defaults.baseURL = 'http://ajax-api.itheima.net'

    // 功能列表
    // 功能1: 上传头像
    // 点击修改按钮弹出文件选择框
    qs('.figure-caption').addEventListener('click',()=>qs('#upload').click())
    qs('#upload').addEventListener('change',async function(){
      const file = this.files[0]
      // console.log(file)
       // 当file为undefined时，表示用户没有选择文件，后续的头像上传不用执行了
      if(!file){
        return
      }
      // 到这就可以进行头像上传了
      const fd = new FormData()
      // 借助于append方法
      fd.append('avatar',file)
      const {data:{data:{url:imgUrl}}} = await axios.post('/api/file',fd)
      document.querySelector('.figure-img').src = imgUrl
    })
      
    
    
    // 功能2: 页面初始化: 获取个人信息，并渲染到页面中
    // initPage()
    // async function initPage() {
    //   const {data:{data:res}}= await axios.get('/api/settings')
    //   console.log(res)
    //   nickname.value = res.nickname
    //   avatar.src = res.avatar
    //   province.value = res.province
    //   city.value = res.city
    //   area.value = res.area
    // }






    // 功能3: 省市区的联动效果
//     async function init() {
//     const { data: { data: arrProvince } } = await axios.get('/api/province')
//     console.log(arrProvince)
//     const strProvince = arrProvince.map(item =>
//         `<option value="${item}">${item}</option>`
//     ).join('')
//     console.log(strProvince)
//     province.innerHTML = '<option value="">请选择省份</option>' + strProvince
//     const { data: { data: cityArr } } = await axios.get('/api/city', {
//         params: {
//           pname: province.value
//         }
//     })
//     console.log(cityArr)
//     const cityStr = cityArr.map(item =>
//         `<option value="${item}">${item}</option>`
//     ).join('')
//     city.innerHTML = '<option value="">请选择城市</option>' + cityStr
//     const { data: { data: areaArr } } = await axios.get('/api/area', {
//         params: {
//           pname: province.value,
//           cname:city.value
//         }
//     })
//     console.log(areaArr)
//     const areaStr = areaArr.map(item=>
//         `<option value="${item}">${item}</option>`
//     ).join('')
//     area.innerHTML = '<option value="">请选择区县</option>' + areaStr
//     // // 默认瑶海区
//     // area.value = '瑶海区'
// }
// init()

// // 省注册change事件
// province.addEventListener('change', async function () {
//     console.log(this.value)
//     // 获取指定省下面所有的市
//     const { data: { data: cityArr } } = await axios.get('/api/city', {
//         params: {
//           pname: this.value
//         }
//     })
//     console.log(cityArr)
//     const cityStr = cityArr.map(item =>
//         `<option value="${item}">${item}</option>`
//     ).join('')
//     city.innerHTML = '<option value="">请选择城市</option>' + cityStr


//     // 重置区县数据
//     area.innerHTML = '<option value="">请选择区县</option>'
// })

// city.addEventListener('change', async function () {
//     console.log(this.value)
//     const { data: { data: areaArr } } = await axios.get('/api/area', {
//         params: {
//           pname: province.value,
//           cname:this.value
//         }
//     })
//     console.log(areaArr)
//     const areaStr = areaArr.map(item=>
//         `<option value="${item}">${item}</option>`
//     ).join('')
//     area.innerHTML = '<option value="">请选择区县</option>' + areaStr
// })


async function getProvinceData() {
      const { data: { data: arrProvince } } = await axios.get('/api/province')
    console.log(arrProvince)
    const strProvince = arrProvince.map(item =>
        `<option value="${item}">${item}</option>`
    ).join('')
    console.log(strProvince)
    province.innerHTML = '<option value="">请选择省份</option>' + strProvince
}

// 封装市
async function getCityData(pname) {
      const { data: { data: cityArr } } = await axios.get('/api/city', {
        params: {
          pname,
        }
    })
    console.log(cityArr)
    const cityStr = cityArr.map(item =>
        `<option value="${item}">${item}</option>`
    ).join('')
    city.innerHTML = '<option value="">请选择城市</option>' + cityStr
}

// 封装区县
async function getAreaData(pname,cname) {
    //   const cityStr = cityArr.map(item =>
    //     `<option value="${item}">${item}</option>`
    // ).join('')
    // city.innerHTML = '<option value="">请选择城市</option>' + cityStr
    const { data: { data: areaArr } } = await axios.get('/api/area', {
        params: {
          pname,
          cname
        }
    })
    console.log(areaArr)
    const areaStr = areaArr.map(item=>
        `<option value="${item}">${item}</option>`
    ).join('')
    area.innerHTML = '<option value="">请选择区县</option>' + areaStr
}

async function init() {
    const {data:{data:res}}= await axios.get('/api/settings')
      console.log(res)
      nickname.value = res.nickname
      avatar.src = res.avatar
      

  // todo
  await getProvinceData()
  
  // todo
  await getCityData(res.province)
  
  // todo
  await getAreaData(res.province,res.city)
  province.value = res.province
  city.value = res.city
  area.value = res.area
}
init()

// 省注册change事件
province.addEventListener('change', async function (e) {
  console.log(this.value)
  // 获取指定省下面所有的市
  await getCityData(this.value)


  // 重置区县数据
  area.innerHTML = '<option value="">请选择区县</option>'
})
city.addEventListener('change', async function () {
  console.log(this.value)
  await getAreaData(province.value,this.value)
})

    // 功能4: 保存个人信息，刷新页面，可以看到自己保存的个人信息
    document.querySelector('.btn-primary').addEventListener('click',async function(e){
      e.preventDefault()
      // console.log(1111111)
      const res = await axios.put('/api/settings',{
        nickname:nickname.value,
        province:province.value,
        city:city.value,
        area:area.value,
        avatar:avatar.src,
        })
        console.log(res)
    })

    //        说明：由于接口提供的是相同账号下的个人信息，所以当大家都在练习的时候，会出现互相覆盖的情况


    
    // 要求： 
    // 1. 使用 axios 发送请求
    // 2. 设置 axios 请求根路径
    // 3. 配合 async await 完成功能



  